<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>watch</title>
  <!-- <script type="text/javascript" src="https://unpkg.com/vue@3.0.0-beta.17/dist/vue.global.js"></script>
	<style> -->

  <script src="vue.beta.js"></script>
  </style>
</head>

<body>
  <div id="app">
    <input v-model="name.firstName" type="text">
    <input v-model="name.lastName" type="text">

    <div>{{name.fullName}}</div>
  </div>
</body>
<script>
  const {
    createApp,
    ref,
    reactive,
    watch,
  } = Vue

  // const firstName = ref("");
  // const lastName = ref("");
  let fullName = ref("")
  // reactive 深层次的包装
  const name = reactive({
    firstName: "",
    lastName: "",
    fullName: ""
  })

  const app = {
    setup() { //他是一个函数，函数的入口。组合很多的组件
      // watch(name, (newVal, oldVal) => {
      //   fullName.value = name.firstName + name.lastName
      // })
      console.log(fullName) //ref 使用的话，需要 .value值获取具体
      console.log(name) //reactive 使用的话，不需要用 .value值获取具体
      watch(() => name.firstName, (newVal, oldVal) => { //监听对象里面的单个属性
        name.fullName = name.firstName + name.lastName
      })

      watch(() => name.lastName, (newVal, oldVal) => { //监听对象里面的单个属性
        name.fullName = name.firstName + name.lastName
      })


      // watch(lastName, (newVal, oldVal)=> {
      //   fullName.value = firstName.value + lastName.value
      // })

      return {
        // firstName,
        // lastName,
        name
      }
    }
  }

  //在数据被改变的时候，进行相应的逻辑，需要个函数，需要watch 钩子函数

  createApp(app).mount("#app")


  // optionAPI
  // const vm = new Vue({
  // 	el: "#app",
  // 	data: {
  // 		message
  // 	},
  // 	templte: {}
  // });
</script>

</html>